<template>
  <el-form :model="model"  :rules="rulesForm" ref="dataForm">
        <el-row>
            <el-col :span="11">
                <el-form-item label="维修单名称" label-width="130px" prop="repair_name" >
                    <el-input v-model="model.repair_name" style="width:250px" placeholder="请输入维修单名称" autocomplete="off"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="设备名称" label-width="130px" prop="machinery_name">
                    <el-input v-model="model.machinery_name"  style="width:250px" :disabled="isUpdate"  @focus="SelectDem" placeholder="请选择设备名称" autocomplete="off"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="11">
                <el-form-item label="报修日期" label-width="130px">
                    <el-date-picker type="date" style="width:250px" value-format="yyyy-MM-dd" v-model="model.require_date" placeholder="请选择报修日期" ></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="预计维修完成日期" label-width="130px">
                    <el-date-picker type="date" style="width:250px" value-format="yyyy-MM-dd" v-model="model.finish_date" placeholder="请选择预计维修完成日期" ></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="11">
                <el-form-item label="验收日期" label-width="130px">
                   <el-date-picker type="date" style="width:250px" value-format="yyyy-MM-dd" v-model="model.confirm_date" placeholder="请选择验收日期" ></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="备注" label-width="130px" prop="remark">
                    <el-input v-model="model.remark" style="width:250px" placeholder="请输入备注" autocomplete="off"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-dialog class="box-dialog" width="45%"  :title="title" :visible.sync="dialogFormVisible" @close="close" :close-on-click-modal="false" append-to-body>
            <Select @SelectChange="SelectChange" v-if="dialogType==0"/>

            <div v-else>
                <el-form
                ref="dataForms"
                 :rules="rulesForm"
                :model="searchForms"
                size="small"
                class="demo-form-inline"
                label-width="80px"
                >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目名称" prop="subject_name" label-width="130px">
                            <el-input v-model="model.subject_name"  placeholder="请输入内容" style="width:250px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="故障描述" prop="malfunction">
                            <el-input v-model="model.malfunction"  placeholder="请输入内容" style="width:250px" ></el-input> 
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="故障描述资源" prop="malfunction_url" label-width="130px">
                            <el-input v-model="model.malfunction_url"  placeholder="请输入内容" style="width:250px" ></el-input> 
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="维修情况" prop="repair_des">
                            <el-input v-model="model.repair_des"  placeholder="请输入内容" style="width:250px"></el-input> 
                        </el-form-item>
                    </el-col>
                </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:right">
                    <el-button @click="saves" style="margin-right:10px;" type="primary">确 定</el-button>
                    <el-button @click="close" style="margin-right:10px;">取 消</el-button>
                </div>
            </div>
        </el-dialog>

        <div v-if="islook">
            <el-divider>操作步骤</el-divider>
            <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-plus"
                    plain
                    @click="adds"
                    >新增</el-button
                    >
            <el-table
                style="width: 100%"
                :data="tableData"
                max-height="250">
                    <el-table-column align="center" prop="subject_name" label="项目名称"></el-table-column>
                    <el-table-column align="center" prop="malfunction" label="故障说明"></el-table-column>
                    <el-table-column align="center" prop="malfunction_url" label="故障描述资源" ></el-table-column>
                    <el-table-column align="center" prop="repair_des" label="维修情况"></el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="120" v-if="isUpdate">
                    <template slot-scope="scope">
                        <el-button @click="updateRow(scope.row.line_id)" type="text" size="small">修改</el-button>
                        <el-button @click="del(scope.row.line_id)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="text-align:right;">
            <el-button @click="save" slot="reference" type="primary">确 定</el-button>
            <el-button @click="closeDialog" style="margin-right:10px;">取 消</el-button>
        </div>
    </el-form>
            


            
</template>

<script>

import Select from './Select_EquipmentIedger.vue';
export default {
    components:{
        Select
    },
    props:{
        model:{
            type:Object, //类型
            required:true, //必要性
        },
        tableData: {
            type: Array,
            required: true,
        },
        islook: {
            type: Boolean,
            required: true,
        },
        searchForms: {
            required: true,
        },
        islook: {
            type: Boolean,
            required: true,
        },
          isUpdate:Boolean
      },
    data(){
        return{
            rulesForm:{
            },
            title:'新增维修单行',
            dialogFormVisible:false,
            isloading:false,
            dialogType:0
        }
    },
    methods:{
        adds(e){
            this.dialogFormVisible = true;
            this.dialogType=1;
        },
        saves(e){
            console.log(222);
                this.$http.postForm('/api/RepairOrder/Adds',{model:this.model})
                    .then(res=>{
                    console.log(res);
                    if(res.data.code==200){
                        this.ShowMsg(res.data.msg,'success');
                        this.dataBind(this.model.repair_id);
                        this.close();
                    }
                    }).catch(err=>{
                    }).finally(()=>{
                        this.close();
                    })
        },
        save(){
            this.$refs.dataForm.validate((valid)=>{
                if (valid) {
                    if(this.isUpdate)
                    {
                        console.log(111);
                        this.$http.putForm('/api/RepairOrder',{model:this.model})
                        .then(res =>{
                            console.log(res);
                            if(res.data.code == 200){
                                this.ShowMsg(res.data.msg,'success');
                                this.$emit('dataBind')
                                this.closeDialog();
                            }
                        })
                        .catch(err =>{
                            this.ShowMsg('服务器异常','error');
                        })
                    }
                } else {
                        console.log('error submit!!');
                        return false;
                    }
            })

           
        },
        SelectDem(){
            this.dialogFormVisible=true;
            this.dialogType=0;
        },
        SelectChange(e){
           this.model.machinery_name=e.machinery_name;
           this.model.machinery_code=e.machinery_code;
           this.model.machinery_type_id= e.machinery_type_id;
           this.model.machinery_id= e.machinery_id;
           this.dialogFormVisible=false;
           this.dialogType=0;
        },
        closeDialog(){
          this.$emit('closeDialog')
        },
        close(){
            this.dialogFormVisible=false;
        },
    }
}

</script>

<style>

</style>